<template>
  <div class="medias-component" style="height: 100%; position: relative">
    <div class="scrollBox right_cont_wrap" style="width: 100%; height: 100%">
      <el-row>
        <el-col :span="24">
          <div class="content_event_right">
            <div class="video" v-show="currentIndex == 0">
              <div v-if="videoRepetition">
                <EasyPlayer
                  ref="videoPlayer"
                  :videoUrl="playerOptions.sources[0].src"
                  :easyStretch="false"
                  @timeupdate="timeupdate"
                  alt=""
                  :live="false"
                  :show-custom-button="true"
                  :has-audio="
                    $store.getters.flvHasAudio ||
                    !playerOptions.sources[0].src.includes('.flv')
                  "
                ></EasyPlayer>
              </div>
              <div>
                <videoRepet
                  v-if="!videoRepetition"
                  :videos="videosList"
                  ref="videoRepeat"
                ></videoRepet>
              </div>
            </div>
            <el-carousel
              v-show="currentIndex == 1"
              ref="carousel"
              arrow="always"
              :autoplay="false"
              class="pic-9"
            >
              <el-carousel-item v-for="(item, index) in imgsList" :key="index">
                <el-image
                  @contextmenu.prevent.native="disableContextmenu"
                  :src="item"
                  @click="onPreview(index)"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
            <div
              class="medias-map-component top_map"
              :id="currentIndex === 2 ? '' : 'mapEvent'"
            >
              <EventMapolBig
                :position="isLocation ? positionData.position : position"
                :positionMonitor="
                  isLocation ? positionData.positionMonitor : positionMonitor
                "
                :horiAzimuthAngle="order.horiAzimuthAngle"
                :isShowMonitor="order.warningSource != 9"
                :isShowTip="
                  order.warningSource === '1' || order.warningSource === '4'
                "
                :taskId="order.taskId"
                :orderData="order"
                v-on="$listeners"
                :gridInfo="order.gridInfo"
                :warningSource="order.warningSource"
                v-if="position.length > 0"
                :gridId="order.gridId"
                :mapId="mapId + 'etop'"
              ></EventMapolBig>
            </div>
            <div
              v-show="currentIndex != 0"
              class="fullScreenIcon"
              @click="fullscreenClick"
            >
              <i
                :title="fullScreenFlag ? '取消全屏' : '全屏'"
                class="iconfont"
                :class="
                  fullScreenFlag
                    ? 'icon-a-caozuo-quanping-shousuo21'
                    : 'icon-quanpingicon'
                "
              ></i>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <div class="footer_cont">
          <div
            class="footer_item"
            v-if="videosList.length > 0"
            :class="currentIndex == 0 ? 'active' : ''"
            @click="handleFooterItemClick(0)"
          >
            <div class="video">
              <div v-if="videoRepetition">
                <EasyPlayer
                  ref="videoPlayer"
                  :videoUrl="playerOptions.sources[0].src"
                  :easyStretch="false"
                  @timeupdate="timeupdate"
                  alt=""
                  :live="false"
                  :show-custom-button="true"
                  :has-audio="
                    $store.getters.flvHasAudio ||
                    !playerOptions.sources[0].src.includes('.flv')
                  "
                ></EasyPlayer>
              </div>
              <div>
                <videoRepet
                  v-if="!videoRepetition"
                  :videos="videosList"
                ></videoRepet>
              </div>
            </div>
          </div>
          <div
            class="footer_item"
            v-if="imgsList.length > 0"
            :class="currentIndex == 1 ? 'active' : ''"
            @click="handleFooterItemClick(1)"
          >
            <el-carousel
              ref="carousel"
              class="pic"
              trigger="click"
              :autoplay="false"
            >
              <el-carousel-item v-for="(item, index) in imgsList" :key="index">
                <el-image
                  @contextmenu.prevent.native="disableContextmenu"
                  :src="item"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div
            class="footer_item"
            :class="currentIndex == 2 ? 'active' : ''"
            @click="handleFooterItemClick(2)"
          >
            <div class="map" ref="map">
              <EventMapol
                :position="isLocation ? positionData.position : position"
                :positionMonitor="
                  isLocation ? positionData.positionMonitor : positionMonitor
                "
                :horiAzimuthAngle="order.horiAzimuthAngle"
                :isShowMonitor="order.warningSource != 9"
                :isShowTip="
                  order.warningSource === '1' || order.warningSource === '4'
                "
                :taskId="order.taskId"
                :orderData="order"
                v-on="$listeners"
                :gridInfo="order.gridInfo"
                :warningSource="order.warningSource"
                v-if="position.length > 0"
                :mapId="mapId + 'efooter'"
                :evenId="'idMain'"
                :gridId="order.gridId"
              ></EventMapol>
            </div>
          </div>
        </div>
      </el-row>
      <div
        class="event_map_arrow_img"
        :class="
          order.horiAzimuthAngle &&
          (order.warningSource === '1' || order.warningSource === '4')
            ? 'tollerHeight'
            : ''
        "
        v-if="currentIndex == 2 && arrowImgList.length"
      >
        <el-carousel trigger="click" arrow="always" :autoplay="false">
          <el-carousel-item
            v-for="(item, index) in arrowImgList"
            :key="item.resourceId"
          >
            <el-image
              @contextmenu.prevent.native="disableContextmenu"
              :src="item.resourceUrl"
              @click="onPreview(index, true)"
            ></el-image>
            <div class="fileWaterMark">
              <div class="addricon">
                <i class="iconfont icon-dizhi"></i>
              </div>
              <p>{{ JSON.parse(item.fileWaterMark).shootingAddress }}</p>
            </div>
          </el-carousel-item>
        </el-carousel>
        <div @click="handleArrowClose" class="arrow_img_close">
          <i class="iconfont el-icon-close"></i>
        </div>
      </div>
      <el-image-viewer
        v-if="showViewer"
        :z-index="3048"
        :on-close="closeViewer"
        :url-list="imgsList"
        @contextmenu.prevent.native="disableContextmenu"
        :initialIndex="selectImageIndex"
      />
    </div>
  </div>
</template>
<script>
import { $v } from "@/utils/public";
import EventMapol from "@/views/pages/eventManagement/eventMapol";
import EventMapolBig from "@/views/pages/eventManagement/eventMapolBig";
import videoRepet from "@/components/eventManagement/videoRepet.vue";
import ElImageViewer from "@/components/ElImgViewer";
import { getHoriAzimuthAngle } from "@/utils/countAngleDistance";
import screenfull from "screenfull";
import EventBus from "@/components/EventBus";
import eventBus from "@/utils/event-bus";

export default {
  name: "mediasComp",
  components: {
    videoRepet,
    ElImageViewer,
    EventMapol,
    EventMapolBig,
    screenfull,
  },
  props: {
    video: {
      type: Object | Array,
      default: () => ({}),
    },
    order: {
      type: Object,
      default: () => ({}),
    },
    imgs: {
      type: Array,
      default: () => [],
    },
    mapId: {
      type: String,
      default: "eventMapDetails",
    },
    isLocation: {
      type: Boolean,
      default: false,
    },
    positionData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      getHoriAzimuthAngle,
      erd: null,
      width: 0,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        loop: false, // 导致视频一结束就重新开始。
        muted: true, // 默认情况下将会消除任何音频。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        hls: true,
        html5: {
          hls: {
            withCredentials: false,
          },
        },
        sources: [
          {
            type: "application/x-mpegURL",
            src: "",
          },
        ],
        aspectRatio: "16:9",
        poster: "", // 封面地址
        choosed: false, //被选中的
        notSupportedMessage: "未上传视频！", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      videoRepetition: true, //是否轮播视频
      videosList: [], //视频列表
      imgsList: [], //图片
      selectImageIndex: 0,
      showViewer: false,
      position: [], //经纬度
      positionMonitor: [], //摄像头经纬度
      autoplay: true,
      currentIndex: 0,
      fullScreenFlag: false,
      arrowImgList: [],
    };
  },
  watch: {
    video(val) {
      this.videoHandleNew(val);
      this.handleCurrentValue();
    },
    imgs: {
      handler(val) {
        this.imgHandle(val);
        //热成像处理
        if (this.order.frontAlarmPicUrl && this.order.frontAlarmPicUrl != "") {
          this.imgsList.push(this.order.frontAlarmPicUrl); //图片处理
        }
        this.handleCurrentValue();
      },
      deep: true,
      immediate: true,
    },
    order: {
      handler(val) {
        this.dataVideoHandle(val);
        this.dataHandle(val);
      },
      deep: true,
      immediate: true,
    },
    // width(val) {
    //   if (this.$refs.videoRepeat) {
    //     this.$refs.videoRepeat.$el.style.height = val / 16 * 9 + 'px';
    //   }
    // }
  },
  mounted() {
    // 监听容器宽高变化
    // this.erd = elementResizeDetectorMaker();
    // this.erd.listenTo(this.$refs.carousel.$el, (element) => {
    //   const width = element.offsetWidth;
    //   const height = element.offsetHeight;
    //   // this.$refs.carousel.$el.style.height = width / 16 * 9 + 'px';
    //   // this.$refs.carousel.$el.style.height = width * 0.71 + 'px';
    //   // this.$refs.map.style.height = height + 'px';
    //   this.width = width * 2;
    // });
    this.fullscreenInit();
    EventBus.$on("eventMapArrowClick", this.eventMapArrowClick);
  },
  beforeDestroy() {
    this.fullscreenDestroy();
    EventBus.$off("eventMapArrowClick", this.eventMapArrowClick);
    if (this.erd) {
      this.erd.uninstall(this.$refs.carousel.$el);
    }
  },
  methods: {
    onPreview(index, isSmallMap) {
      if (isSmallMap) {
        if (this.imgsList > 0) {
          this.imgsList = [];
        }
        this.imgsList = this.arrowImgList.map((item) => item.resourceUrl);
      }
      this.selectImageIndex = index;
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
    handleCurrentValue() {
      if (this.videosList.length > 0) {
        this.currentIndex = 0;
      } else if (this.imgsList.length > 0) {
        this.currentIndex = 1;
      } else {
        this.currentIndex = 2;
      }
    },
    //数据处理
    dataHandle(data) {
      console.log("末端组件", data);
      this.handleCurrentValue();
      this.handleArrowClose();
      let _this = this;
      //经纬度
      let position = [];
      if (!$v.isEmpty(data.longitude) && !$v.isEmpty(data.latitude)) {
        position.push(parseFloat(data.longitude));
        position.push(parseFloat(data.latitude));
      }
      _this.position = position.length > 0 ? position : [];
      this.$emit("update:position", [
        position[0] ? position[0].toFixed(9) : 0,
        position[1] ? position[1].toFixed(9) : 0,
      ]);
    },
    //图片处理
    imgHandle(data) {
      let _this = this;
      if (data.length > 0) {
        _this.imgsList = [];
        data.forEach((ele) => {
          if (ele.fileUrl) {
            _this.imgsList.push(ele.fileUrl);
          }
        });
      } else {
        _this.imgsList = [];
      }
    },
    //视频处理
    videoHandleNew(video) {
      console.log("视频处理", video);
      this.videosList = [];
      let _this = this;
      const videos = Array.isArray(video) ? video : video.videoList;
      if (videos && videos.length > 0) {
        videos.forEach((ele) => {
          if (ele.src) {
            let videoUrl = {
              src: "",
            };
            videoUrl.src = ele.src;
            _this.videosList.push(videoUrl);
          }
          if (ele.fileImageUrl) {
            let videoUrl = {
              src: "",
            };
            videoUrl.src = ele.fileImageUrl;
            _this.videosList.push(videoUrl);
          }
        });
        _this.videoRepetition = false;
      } else {
        _this.videoRepetition = true;
        _this.playerOptions.sources[0].src = video.fileImageUrl
          ? video.fileImageUrl
          : "";
      }

      // this.$nextTick(() => {
      //   if (this.$refs.videoRepeat) {
      //     // this.$refs.videoRepeat.$el.style.height = this.width / 16 * 9 + 'px';
      //   }
      // })
    },
    //摄像头数据处理
    dataVideoHandle(data) {
      let _this = this;
      _this.positionMonitor = [];
      //经纬度
      if (!$v.isEmpty(data.videoLongitude) && !$v.isEmpty(data.videoLatitude)) {
        //经度（73.33-135.05） 纬度（3.51-53.33）
        _this.positionMonitor.push(parseFloat(data.videoLongitude));
        _this.positionMonitor.push(parseFloat(data.videoLatitude));
      }
      _this.positionMonitor =
        _this.positionMonitor.length > 0
          ? _this.positionMonitor
          : this.position;
      if (this.order.warningSource === "9") {
        if (this.order.satelliteDevice) {
          let { longitude, latitude } = this.order.satelliteDevice;
          this.positionMonitor = longitude ? [longitude, latitude] : [];
        } else {
          this.positionMonitor = [];
        }
      }
      if (this.order.warningSource === "10") {
        if (this.order.radarDevice?.longitude) {
          let { longitude, latitude } = this.order.radarDevice;
          this.positionMonitor = longitude ? [longitude, latitude] : [];
        } else {
          this.positionMonitor = [];
        }
      }
      if (this.order.warningSource === "8") {
        let { deviceLatitude, deviceLongitude } = this.order;
        this.positionMonitor = deviceLatitude
          ? [deviceLongitude, deviceLatitude]
          : [];
      }
      this.$emit("update:positionMonitor", _this.positionMonitor);
    },
    /**
     * 视频播放失败重新加载
     */
    playStatechanged(event) {
      if (event.playing === true) {
        this.playerOptions.sources[0].playing = true;
      }

      if (event.error === true && this.playerOptions.sources) {
        const sources = JSON.parse(JSON.stringify(this.playerOptions.sources));
        this.playerOptions.sources[0].src = "";
        let t = 2000;
        if (!this.playerOptions.sources[0].reload) {
          this.playerOptions.sources[0].reload = 1;

          t = 4000;
        }
        setTimeout(() => {
          if (
            this.playerOptions.sources &&
            !this.playerOptions.sources[0].src
          ) {
            this.playerOptions.sources[0].src = sources[0].src;
            this.playerOptions.sources[0].reload++;
          }
        }, t);
      }
    },
    timeupdate() {
      this.autoplay = false;
    },
    disableContextmenu() {
      return false;
    },
    fullscreenClick() {
      if (!screenfull.enabled) {
        $message.warning("浏览器不支持该功能");
        return false;
      }
      let el = document.querySelector(".content_event_right");
      if (!this.fullScreenFlag) {
        el.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
      // screenfull.toggle();
    },
    fullscreenChange() {
      this.fullScreenFlag = screenfull.isFullscreen;
    },
    fullscreenInit() {
      if (screenfull.enabled) {
        screenfull.on("change", this.fullscreenChange);
      }
    },
    fullscreenDestroy() {
      if (screenfull.enabled) {
        screenfull.off("change", this.fullscreenChange);
      }
    },
    handleFooterItemClick(val) {
      this.currentIndex = val;
      if (val === 2) {
        eventBus.$emit("click-footer-map");
      }
    },
    algorithm(point1, point2) {
      //	角度转换成弧度
      const rad = (d) => {
        return (d * Math.PI) / 180.0;
      };
      let [x1, y1] = point1;
      let [x2, y2] = point2;
      let Lat1 = rad(x1); // 纬度
      let Lat2 = rad(x2);
      let a = Lat1 - Lat2; //	两点纬度之差
      let b = rad(y1) - rad(y2); //	经度之差
      let s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2)
          )
        );
      //	计算两点距离的公式
      s = s * 6378137.0; //	弧长等于弧度乘地球半径（半径为米）
      s = Math.round(s * 10000) / 10000; //	精确距离的数值
      return s;
    },
    eventMapArrowClick(arrowlist) {
      // console.log('arrowlist----', arrowlist)
      this.arrowImgList = [];
      arrowlist.forEach((item) => {
        item.orderFiles.forEach((innerItem) => {
          this.arrowImgList.push(innerItem);
        });
      });
      // 查找附近10米的图片
      let plongitude = arrowlist[0].longitude;
      let platitude = arrowlist[0].latitude;
      let p1 = [+plongitude, +platitude];
      this.order.files.forEach((oItem) => {
        if (oItem.longitude != plongitude || oItem.latitude != platitude) {
          // 距离
          let p2 = [+oItem.longitude, +oItem.latitude];
          let s = this.algorithm(p1, p2);
          console.log("距离M", s);
          if (s <= 10) {
            oItem.orderFiles.forEach((innerItem) => {
              this.arrowImgList.push(innerItem);
            });
          }
        }
      });
    },
    handleArrowClose() {
      this.arrowImgList = [];
    },
  },
};
</script>
<style lang="scss" scoped>
.video {
  //height: 300px;
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  background: #000000;

  /deep/ .video-js {
    border-radius: 0px;
    background-color: transparent;
    padding: 0;
    .vjs-tech {
      border-radius: 0px;
    }
  }

  /deep/ .vjs-control-bar {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  /deep/ .vjs-error-display {
    border-radius: 4px;
  }
  /deep/ .show-imgs-container {
    .el-carousel__item {
      border-radius: 0px;
      .easy-player {
        border-radius: 7px;
      }
    }
  }
}

///deep/ .vjs-big-play-button {
//  display: none !important;
//}

/deep/ .vjs-error .vjs-error-display:before {
  display: none !important;
}
/deep/ .vjs-progress-holder .vjs-load-progress {
  padding: 2.5px !important;
}
/deep/ .vjs-progress-holder .vjs-play-progress {
  padding: 2.5px !important;
}
.map {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  //height: 175px;
  /*background: pink;*/
  // border: 1px solid #D4D4D4;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  //padding-left: 12px;
  position: relative;
  overflow: hidden;
}

.pic {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  /*background: pink;*/
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // border: 1px solid #D4D4D4;
}
.pic-9 {
  border-radius: 6px;
  width: 100%;
  aspect-ratio: 16 / 9;
  /*background: pink;*/
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.el-image {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/deep/ .el-carousel__container {
  height: 100%;
  .el-carousel__arrow--left {
    left: 12px;
  }
  .el-carousel__arrow--right {
    right: 12px;
  }
}

/deep/ ul.el-carousel__indicators.el-carousel__indicators--horizontal {
  width: 100%;
  bottom: 10px;
  text-align: center;
  line-height: 1;
  .el-carousel__indicator--horizontal {
    padding: 0px 0px;
    margin-right: 5px;
    &:last-child {
      margin-right: 0px;
    }
    &.is-active {
      .el-carousel__button {
        opacity: 1;
      }
    }
  }
  .el-carousel__button {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0.4;
  }
}
.scrollBox {
  overflow-y: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 6px;
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    width: 6px;
    border: none;
    background: #eaeaea;
    border-radius: 5px 5px 5px 5px;
  }
}
/deep/.easy-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: transparent !important;
  .easy-video-player-inner {
    .no-single {
      // background-color: transparent !important;
      background: url("~@/assets/image/demoImg.png") no-repeat center / 100%
        100% !important;
    }
  }
}
.right_cont_wrap {
  .content_event_right {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    .top_map {
      height: 100%;
    }
    /deep/ .el-carousel {
      height: 100%;
      .el-carousel__item {
        .el-image {
          border-radius: 6px;
        }
      }
      .el-carousel__indicators {
        display: none;
      }
      .el-carousel__arrow {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.6);
        i {
          font-size: 16px;
        }
      }
    }
  }
  .fullScreenIcon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 999;
    i {
      color: #ffffff;
      font-size: 22px;
    }
  }
  .footer_cont {
    display: flex;
    .footer_item {
      cursor: pointer;
      width: 33.3333%;
      margin-top: 10px;
      margin-left: 5px;
      margin-right: 5px;
      border-radius: 6px;
      border: 1px solid transparent;
      box-sizing: border-box;
      aspect-ratio: 260 / 147;
      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
      &.active {
        border: 1px solid #ff6a6c;
        box-sizing: border-box;
      }
      /deep/ .el-carousel {
        .el-carousel__indicators {
        }
        .el-carousel__arrow {
          width: 28px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          background: rgba(0, 0, 0, 0.71);
          i {
            font-size: 11px;
          }
        }
      }
      .map {
        border: 1px solid #d4d4d4;
        box-shadow: 0px 4px 6px 0px rgba(169, 169, 169, 0.4);
        /deep/ .ol-viewport {
          border-radius: 5px !important;
        }
      }
      .video {
        border-radius: 5px;
        box-shadow: 0px 4px 6px 0px rgba(169, 169, 169, 0.4);
        border: 1px solid #d4d4d4;
        /deep/ .show-imgs-container {
          .el-carousel__item {
            .easy-player {
              .vjs-control-bar {
                display: none;
              }
            }
          }
        }
      }
      .pic {
        box-shadow: 0px 4px 6px 0px rgba(169, 169, 169, 0.4);
        border: 1px solid #d4d4d4;
      }
    }
    .footer_item.active {
      .map {
        border: 1px solid #ff6a6c;
        /deep/ .ol-viewport {
          border-radius: 4px !important;
        }
      }
      .video {
        border: 1px solid #ff6a6c;
        border-radius: 4px;
        /deep/ .show-imgs-container {
          .el-carousel__item {
            .easy-player {
              border-radius: 4px;
            }
          }
        }
      }
      .pic {
        border: 1px solid #ff6a6c;
        border-radius: 4px;
      }
    }
  }
}
.event_map_arrow_img {
  width: 44.25%;
  aspect-ratio: 354 / 204;
  position: absolute;
  right: 13px;
  top: 12px;
  z-index: 1;
  /deep/ .el-carousel {
    height: 100%;
    .el-carousel__item {
      position: absolute;
      .el-image {
        border-radius: 6px;
      }
    }
    .el-carousel__indicators {
      display: none;
    }
    .el-carousel__arrow {
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.6);
      i {
        font-size: 16px;
      }
    }
  }
  .arrow_img_close {
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    line-height: 18px;
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    cursor: pointer;
    i {
      font-size: 10px;
      color: #fff;
    }
  }
}
.tollerHeight {
  top: 47px;
}
.fileWaterMark {
  width: 100%;
  height: 32px;
  background: linear-gradient(
    360deg,
    #000000 0%,
    rgba(0, 0, 0, 0.21) 77%,
    rgba(0, 0, 0, 0) 99%,
    rgba(0, 0, 0, 0) 100%
  );
  border-radius: 0px 0px 8px 8px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 13px;
  .addricon {
    margin-right: 7px;
    i {
      font-size: 14px;
      color: #ffffff;
    }
  }
  p {
    font-size: 14px;
    color: #ffffff;
    line-height: 14px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
#mapEvent {
  position: absolute;
  left: 99999px;
  top: 0;
  height: 100%;
  width: 100%;
}
</style>
<style lang="scss">
.medias-component {
  .vjs-custom-skin .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    content: "\edc4" !important;
    display: block;
    font-size: 18px;
  }
}
</style>
